<template>
    <div class="page">
        <el-card shadow="never" class="mt-4">
            <el-button  @click="$router.back()">返回</el-button>
            <el-dropdown class="ml-4" @command="handleCommand">
                <el-button type="primary" class="el-dropdown-link">
                    导出<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="">全部</el-dropdown-item>
                    <el-dropdown-item command="1">未兑换</el-dropdown-item>
                    <el-dropdown-item command="2">已兑换</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="mt-4" v-loading="loading">
                <el-table ref="table" :data="data">
                    <el-table-column label="勋章课程兑换码" prop="code"/>
                    <el-table-column label="兑换课程" prop="course_name"/>
                    <el-table-column label="兑换用户名" prop="user_name"/>
                    <el-table-column label="兑换用户电话/邮箱" prop="contact_information"/>
                    <el-table-column label="是否已兑换">
                        <template slot-scope="{row}">
                            {{ row.status === 1 ? '未兑换'
                                : row.status === 2 ? '已兑换'
                                : row.status === 3 ? `已分配给企业：${row.company_name}`
                                : `已分配给用户：${row.assign_user_name}`
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="兑换时间">
                        <template slot-scope="{row}">
                            {{ row.exchange_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer mt-4 text-center">
                <el-pagination
                    class="center"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { Dropdown, DropdownItem, DropdownMenu } from 'element-ui';

export default {
    components: {
        ElDropdown: Dropdown,
        ElDropdownItem: DropdownItem,
        ElDropdownMenu: DropdownMenu,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            visible: false,
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 25,
                groupId: '',
            },
            totalElements: 0,
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        fetchData() {
            this.loading = true;
            API.get('merit_exchange_code/page', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },

        handleCommand(status) {
            const query = `?groupId=${this.$route.params.id}&status=${status || ''}`;
            window.location.href = `${process.env.VUE_APP_API_PREFIX}merit_exchange_code/export${query}`;
        },
    },
    mounted() {
        this.form.groupId = this.$route.params.id;
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}
</style>
